<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
  <meta name="description" content="初音未来版本的通过点击/触摸播放声音并出现变化图案的互动内容。">
  <title>Mikutap</title>
  <link rel="apple-touch-icon" href="mikutap-icon.png">
  <link rel="icon" href="mikutap-icon.png">
  <link href="https://fonts.loli.net/css?family=Quicksand:400" rel="stylesheet">
  <style>#about_cover,#view,#view canvas,body,html{height:100%;width:100%}#about,#about_cover,#bt_fs,#ng,.ok{display:none}#about a,#bt_about a,#bt_backtrack a,#bt_feedback a,#bt_start a{color:#fff;text-decoration:none;border-bottom:dashed 1px #fff}body,html{position:absolute;overflow:hidden;text-align:center;background:#8cc;color:#fff;font-family:Quicksand,"游ゴシック","Yu Gothic","游ゴシック体",YuGothic,"Yu Gothic UI","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Meiryo UI","メイリオ",Meiryo,sans-serif}#about_cover,#view{position:fixed;top:0;z-index:1}#bt_back,#bt_fs{position:absolute;z-index:100;padding:10px;left:0;font-size:1rem;cursor:pointer;transition:.2s ease}#bt_fs{left:auto;right:0}#scene_main,#scene_top{width:90%}#scene_loading{width:100%}#about,#scene_loading,#scene_main,#scene_top{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:100;display:none}#scene_top h1{font-size:1.5rem;margin-bottom:25px}#bt_start{margin-bottom:15px}#scene_top .attention{font-size:.9rem;margin-top:25px}#scene_top .tit{margin-top:20px;margin-bottom:10px}#scene_top .con{letter-spacing:-.5rem}#scene_top .sns{margin:0 8px;cursor:pointer}#scene_top .sns img{width:40px}#ng .atten{font-size:.9rem;margin-bottom:20px}#scene_loading hr{width:"0%"}#scene_main,#scene_main .attention{pointer-events:none}#bt_backtrack,#bt_feedback{font-size:.9rem;margin-top:20px;pointer-events:auto}#about_cover{z-index:900;background:#fff;opacity:.5}#about{z-index:1000;color:#fff;background:#8cc;max-width:640px;letter-spacing:.2rem;line-height:1.2;width:100%}#about_in{padding:40px}#bt_close{font-size:2rem;cursor:pointer}#about .close{margin-bottom:30px}#about .con{line-height:1.7;margin-bottom:20px}#about .link{margin-top:30px;margin-bottom:10px;line-height:1.5}#bt_back:hover,#bt_backtrack:hover,#bt_close:hover,#bt_feedback:hover,#bt_fs:hover,#scene_top .sns:hover,a:hover{animation:animover .2s linear;-webkit-animation:animover .2s linear}@keyframes animover{0.00%{opacity:0}100%{opacity:1}}@-webkit-keyframes animover{0.00%{opacity:0}100%{opacity:1}}@media (max-width:640px){#scene_top h1{font-size:1.2rem;margin-bottom:18px}#bt_start,#scene_top .tit{margin-bottom:10px}#bt_about a,#bt_start a{font-size:.9rem}#scene_top .attention{font-size:.6rem;margin-top:18px}#scene_top .tit{font-size:.9rem;margin-top:20px}#scene_top .con{letter-spacing:-.5rem}#scene_top .sns{margin:0 8px}#scene_top .sns img{width:30px}#ng .atten{font-size:.6rem;margin-bottom:15px}#bt_backtrack,#bt_feedback{font-size:.7rem}#about_in{padding:30px}#bt_close{font-size:1.8rem;cursor:pointer}#about{letter-spacing:.1rem}#about a{color:#fff;text-decoration:none;border-bottom:dashed 1px #fff}#about .con,#about .link{font-size:.9rem}}@charset "utf-8";a:link,a:visited,body,html,legend{color:#000}#black,#black a:link,#black a:visited{color:#fff}#black a:link,#black a:visited,a:active,a:hover,a:link,a:visited{text-decoration:underline;outline:0}html{background:#FFF}blockquote,body,code,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}q:after,q:before{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,select,textarea{font-family:inherit;font-size:inherit;font-weight:inherit}#yui3-css-stamp.cssreset{display:none}.default,body,html{font-family:"游ゴシック","Yu Gothic","游ゴシック体",YuGothic,"Yu Gothic UI","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Meiryo UI","メイリオ",Meiryo,sans-serif;letter-spacing:.2rem;line-height:1.5;-webkit-text-size-adjust:100%}body{margin:0;background:#fff}a,body,html{-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent}a:active,a:hover{color:#969696}#black{margin:0;background:#000}.noselect{-ms-user-select:none;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;user-select:none}.noanti{-ms-interpolation-mode:nearest-neighbor;image-rendering:-webkit-crisp-edges;image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:crisp-edges;image-rendering:pixelated}#flash_audio{position:absolute;pointer-events:none}</style>
  <script charset="utf-8" src="https://cdnjs.loli.net/ajax/libs/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>
  <script charset="utf-8" src="https://cdnjs.loli.net/ajax/libs/pixi.js/3.0.11/pixi.min.js" type="text/javascript"></script>
  <script charset="utf-8" src="https://cdnjs.loli.net/ajax/libs/gsap/1.19.1/TweenMax.min.js" type="text/javascript"></script>
  <script charset="UTF-8" src="js/common-2.min.js" type="text/javascript"></script>
  <script charset="utf-8" src="js/mikutap.min.js" type="text/javascript"></script>
</head>
<body oncontextmenu=self.event.returnValue=false onselectstart="return false">
  <div id="view"></div>
  <div id="scene_top">
    <h1>Mikutap</h1>
    <div id="ng">
      <p class="atten">肥肠抱歉<br>您的浏览器并不支持本页面需要的特性</p>
    </div>
    <div class="ok">
      <p id="bt_start"><a href="">[ 开始 ]</a></p>
    </div>
    <p id="bt_about"><a href="">-*关于*-</a></p>
    <div class="ok">
      <p class="attention">※请打开声音并享受。</p>
    </div>
     <div class="ok">
     <p class="tit"><strong>本页面搬运自: <a href="https://aidn.jp/mikutap">一个神奇的网页</a></strong></p>
    </div>
  </div>
  <div id="scene_loading">
    <hr size="1" color="#fff"> </div>
  <div id="scene_main">
    <div class="set">
      <p class="attention">点击 &amp; 拖动或者按任意键!<br/>就会出来一大堆特技</p>
      <p id="bt_backtrack"><a href="">背景音乐: 开启</a></p>
    </div>
  </div>
  <div id="about_cover"></div>
  <div id="about">
    <div id="about_in">
      <p class="close"><span id="bt_close">×</span></p>
      <p class="con"> 声音来源 <a href="https://ec.crypton.co.jp/pages/prod/vocaloid/mikuv4x" target="_blank">Hatsune Miku</a> </p>
      <p class="con"> 作者 <a href="https://aidn.jp" target="_blank">daniwell</a> (<a href="https://twitter.com/daniwell_aidn" target="_blank">twitter</a> | 需要魔法上网) </p>
      <p class="link"> 灵感来源 <a href="http://patatap.com/" target="_blank">Patatap</a><br>(令人赞叹的网页!)</p>
    </div>
  </div>
  <div id="bt_back">＜返回</div>
  <div id="bt_fs">☢全屏显示</div>
</body>

</html>
